<template>
    <div v-if="show" class="wicket">
        <div class="close" @click="closeFun">
            <el-icon><close-bold /></el-icon>
        </div>
        <div class="video">
            <video id="video1" :src="props.videoUrl"></video>
            <div class="progressBar">
                <div class="play" @click="playFun(play)">
                    <img
                        v-show="play"
                        src="https://img.static-keyid.cn/toolspace/scrm/2023/09/1694571630897sfkcycifteki9yuq.png"
                        alt="" />
                    <img
                        v-show="!play"
                        src="https://img.static-keyid.cn/toolspace/scrm/2023/09/1694571642162cpolyukegwvmp8gd.png"
                        alt="" />
                </div>
                <div class="progress">
                    <progress :value="progress" max="1" />
                    <div class="time">
                        <span class="start">{{ startTime }}</span>
                        <span class="end">{{ endTime }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, withDefaults } from 'vue';

interface Props {
    modelValue?: any;
    videoUrl?: any;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    videoUrl: ''
});
const videoCheck = ref(false);
const play = ref(true);
const progress = ref<any>('0');
const startTime = ref('00:00');
const endTime = ref('00:00');

const emit = defineEmits(['update:modelValue']);

const show = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

// 关闭播放器窗口
const closeFun = () => {
    show.value = false;
    videoCheck.value = false;
    progress.value = '0';
    startTime.value = '00:00';
    endTime.value = '00:00';
    play.value = true;
};

// 获取起始时间
const getTime = () => {
    const video: any = document.querySelector('#video1');
    const minute = Math.floor(video.duration / 60);
    const second = Math.floor(video.duration % 60);
    endTime.value = `${mendZero(minute) || '00'}:${mendZero(second) || '00'}`;
};

// 获取当前时间
const nowTime = () => {
    const video: any = document.querySelector('#video1');
    const minute = Math.floor(video.currentTime / 60);
    const second = Math.floor(video.currentTime % 60);

    const now_time = video.currentTime;
    const end_time = video.duration;
    const speed = now_time / end_time;

    if (speed == 1) {
        play.value = true;
    }

    progress.value = speed;
    startTime.value = `${mendZero(minute)}:${mendZero(second)}`;
};

// 播放和暂停
const playFun = state => {
    const video: any = document.querySelector('#video1');
    play.value = !state;
    getTime();
    const Time = setInterval(() => {
        if (videoCheck.value) {
            nowTime();
        }
    }, 1000);
    if (state) {
        video.play();
        Time;
    } else {
        video.pause();
        clearInterval(Time);
    }
};

const mendZero = num => {
    if (num < 10) {
        num = '0' + num;
    }
    return num;
};

onMounted(() => {});

onBeforeUnmount(() => {});

defineExpose({
    videoCheck
});
</script>

<style lang="scss" scoped>
.wicket {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba($color: #000, $alpha: 60%);
    align-items: center;
    justify-content: center;

    .close {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50px;
        right: 50px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 30px;
        z-index: 99;
    }

    .video {
        width: 60%;
        height: 70%;
        display: flex;
        flex-direction: column;
        min-width: 1000px;
        min-height: 700px;
        background: white;

        video {
            width: 100%;
            height: 650px;
            background: black;
        }

        .progressBar {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;

            .play {
                width: 75px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .progress {
                flex: 1;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 20px 0 0;
                box-sizing: border-box;
                flex-direction: column;
                position: relative;

                progress {
                    width: 100%;
                }

                .time {
                    width: 98%;
                    position: absolute;
                    bottom: 0;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
</style>
